<template>
  <div class="site-container">
    <div class="images">
      <div class="image" v-for="img in imageData" :key="img.index">
        <img :src="require(`../assets/survey/site${img.index}.png`)" :alt="img.alt">
      </div>
      <div class="hoverArea">
        <span v-for="img in imageData" :key="img.index" 
          @mouseenter="showDescription" @mouseleave="hideDescription"></span>
      </div>
    </div>
    <div class="siteDescription">
      <span class="note">轻触/悬停到地图上以查看说明</span>
      <p v-for="(p, index) in descriptions" :key="index" class="description">{{p}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'site',
  data(){
    return{
      imageData:[
        {
          index: 1,
          alt: '北京尺度观察地段',
        },
        {
          index: 2,
          alt: '八里庄尺度观察地段',
        },
        {
          index: 3,
          alt: '京棉二厂尺度观察地段',
        }
      ],
      descriptions:[
        '八里庄位于北京东北地带，朝阳区中南部。地段内存在两条非常重要的东西向交通流线。西北方向存在红领巾公园\
        -朝阳公园-奥林匹克森林公园组成的由小至大的景观序列。',
        '本此规划设计的地段主要覆盖目前的京棉二厂小区。其位于慈云寺立交桥东北方，北侧有小河经过。\
        尽管周边已经建起了许多现代高层住宅，南侧还有由京棉二厂生产区改造而成的文创园，\
        京棉二厂小区却仍然保留着许多年前的老旧低层或多层住宅',
        '除去4栋新建的商品房住宅楼，京棉二厂小区的多数住宅还是强调传统的院落围合形式，组团布局。\
        自南门而入的主干道与原生产区对应，也反应了传统的中轴对称的布局理念。'
      ]
    }
  },
  methods:{
    showDescription(e){
      const description = document.querySelector(`.description:nth-child(${e.target.index+1})`)
      description.classList.add('active')
    },
    hideDescription(){
      const descriptions = document.querySelectorAll('.description')
      descriptions.forEach(element => {
        element.classList.remove('active')
      });
    }
  },
  mounted(){
    /*绑定序号，方便地图与说明一一对应*/
    const areas = document.querySelectorAll('.hoverArea > span')
    for(let i=0; i<areas.length; i++){
      areas[i].index = i+1  //
    }
  }
}
</script>

<style scoped>
.site-container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
}

.images{
  width: fit-content;
  height: min(calc(100vw*1200/1080), 72vh);
  margin-left: 4vw;
  position: relative;
}

.images > .image{
  width: calc(min(calc(100vw*1200/1080), 72vh) * 1080 / 1388);
  height: 100%;
  position: absolute;
  opacity: 0;
  transform: translateY(-20%);
}

.images > .hoverArea{
  width: calc(min(calc(100vw*1200/1080), 72vh) * 1080 / 1388);
  height: 100%;
  position: relative;
  top: 0;
  opacity: 1;
  /*用于规定hover范围尺寸的自定义变量*/
  --hover-width: calc(min(calc(100vw*1200/1080), 72vh) * 0.36);
}

.images > .image > img{
  height: 100%;
}

.images > .image:nth-child(1){
  animation: fadeDown 1s ease-out forwards;
}
.images > .image:nth-child(2){
  animation: fadeDown 1s ease-out 1s forwards;
}
.images > .image:nth-child(3){
  animation: fadeDown 1s ease-out 2s forwards;
}

/*用伪元素来定义hover效果范围*/
.hoverArea > span:nth-child(1){
  content: "";
  position: absolute;
  top: 1%;
  right: 2%;
  width: var(--hover-width);
  height: var(--hover-width);
  border-radius: 50%;
  z-index: 5;
}
.hoverArea > span:nth-child(2){
  content: "";
  position: absolute;
  top: 25%;
  left: 2%;
  width: var(--hover-width);
  height: var(--hover-width);
  border-radius: 50%;
  z-index: 5;
}
.hoverArea > span:nth-child(3){
  content: "";
  position: absolute;
  bottom: 1%;
  right: 8%;
  width: var(--hover-width);
  height: var(--hover-width);
  border-radius: 50%;
  z-index: 5;
}

.siteDescription{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.siteDescription > .description{
  width: 80%;
  background: var(--blue);
  margin: 1.5rem 0;
  padding: 1.5rem;
  color: white;
  border-radius: 16px;
  opacity: 0.2;
  transition: opacity 0.5s;
  overflow: hidden;
}

.siteDescription > .description.active{
  opacity: 1;
  transition: opacity 0.5s;
}

@media screen and (max-width: 1200px){
  .site-container{
    flex-direction: column;
  }
  .images{
    margin-bottom: 2rem;
  }
  .siteDescription{
    margin-left: 0;
  }

  .siteDescription > .description{
    opacity: 1;
    margin: 0;
    height: 0;
    padding: 0;
    transition: all 0.5s;
  }
  .siteDescription > .description.active{
    opacity: 1;
    margin: 1.5rem 0;
    padding: 1.5rem;
    height: fit-content;
    transition: all 0.5s;
  }
}

@keyframes fadeDown {
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

</style>